<template>
  <el-container class="login-container" >
    <el-aside width="60%" class="login-aside">
        <el-card class="login-content">
            <h1 class="login-title1">Hello!</h1>
            <h1 class="login-title2">欢迎来到<span style="color: #09bbf6"> 易家小铺后台管理</span></h1>
            <el-form :model="loginForm" label-width="70px" label-position="left"
                     :rules="rules" ref="loginForm">
              <el-form-item  label="账号" prop="no">
                <el-input  style="width: 300px" type="text" v-model="loginForm.no"
                           autocomplete="off" prefix-icon="el-icon-user"></el-input>
              </el-form-item>
              <el-form-item  label="密码" prop="password">
                <el-input  style="width: 300px" type="password" v-model="loginForm.password"
                           show-password autocomplete="off" @keyup.enter.native="login"
                           prefix-icon="el-icon-lock"></el-input>
              </el-form-item>
            </el-form>
            <el-button class="login-button" type="primary" @click="login" :disabled="confirm_disabled">登 陆</el-button>
            <p class="register-button">还没有账号？<a style="color: #409EFF;text-decoration: underline" @click="register()">去注册</a></p>
      </el-card>


    </el-aside>
    <el-main>

    </el-main>
  </el-container>
</template>


<script>
    export default {
        name: "Login",
        data(){
            return{
              //confirm_disabled 被初始化为 false，这意味着登录按钮默认是可用的
                confirm_disabled:false,
                loginForm:{
                    no:'',
                    password:''
                },
                rules:{
                    no: [
                        { required: true, message: '请输入账号', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输密码', trigger: 'blur' }
                    ],
                }
            }
        },
        methods:{
            login(){
                this.confirm_disabled=true;
                this.$refs.loginForm.validate((valid) => {
                    if (valid) { //valid成功为true，失败为false
                        //去后台验证用户名密码
                        this.$axios.post(this.$httpUrl+'/user/login',this.loginForm).then(res=>res.data).then(res=>{
                            console.log(res)
                            if(res.code==200){
                                //存储
                                sessionStorage.setItem("CurUser",JSON.stringify(res.data.user))
                                console.log(res.data.menu)
                                this.$store.commit("setMenu",res.data.menu)
                                //跳转到主页
                                this.$router.replace('/Index');
                            }else{
                                this.confirm_disabled=false;
                                alert(res.msg);
                                return false;
                            }
                        });
                    } else {
                        this.confirm_disabled=false;
                        console.log('校验失败');
                        return false;
                    }
                });

            },
            register(){
              return this.$router.push({path:'/register'});
            }

        }
    }
</script>

<style scoped>
    .login-container{
        background-image: url("../assets/background.png");
        background-size: cover; /* 确保图片覆盖整个容器 */
        background-position: center; /* 图片居中显示 */
        height: 100vh; /* 容器高度为视口高度 */

    }
    .login-aside {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        height: 100vh; /* 使 el-aside 填充整个视口高度 */
    }
    .login-title1 {
        font-size: 32px;
        margin-top: 10px;
        margin-bottom: 20px;
        text-align: left;
    }
    .login-title2{
      font-size: 22px;
      margin-bottom: 20px;
    }
    .login-content {
        height: 500px;
        margin: auto;
        width: 500px;
        padding: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .login-button{
      margin-top: 40px;
      margin-left: 40px;
    }
    .register-button{
      margin-top: 20px;
      margin-left: 40px;
    }
    .custom-input {
      border-radius: 4px; /* 圆角边框 */
      height: 48px; /* 增加输入框的高度 */
      font-size: 16px; /* 增加字体大小 */
      border: 1px solid #dcdfe6; /* 边框颜色 */
      background-color: #ffffff; /* 背景透明 */
      transition: border-color 0.3s; /* 边框颜色变化的过渡效果 */
    }
</style>